import React,{ Component } from 'react';
import {
	StyleSheet,
	View,
	FlatList,
	Text,
	Image
} from 'react-native';

import { BarChart } from '../../common/echarts';
import { DataTable } from '../../common/dataTable';


class ReportChart extends Component{
	constructor(props){
		super(props);
	}

	_renderItem ({item}) {
		if(item.type === 'CHART') {
			return  <View style={styles.chartWraperView}>
						<View style={styles.titleWraper}>
							<Image 
								style={styles.titleImage}
								source={require('../../assets/images/icon_chart.png')}
							/>
							<Text style={styles.chartsTitle}>{item.title}</Text>
						</View>
						<BarChart echartsData = {item.data} />
					</View>
		} else if (item.type === 'TABLE') {
			return  <View style={styles.chartWraperView}>
						<View style={styles.titleWraper}>
							<Image 
								style={styles.titleImage}
								source={require('../../assets/images/icon_table.png')}
							/>
							<Text style={styles.chartsTitle}>{item.title}</Text>
						</View>
						<DataTable tableData = {item.data} />
					</View>
		} 
	}

	render(){
		if(this.props.dataList.length !== 0){
			return  (<View style={styles.chartWraper}>
						<FlatList
				 	       keyExtractor={(item,index)=>index.toString()}
				           data={this.props.dataList}
				    	   renderItem={this._renderItem}
			           />
			        </View>)
		} else {
			return (<Text>{"  "}</Text>)
		}
	}
}


const styles = StyleSheet.create({
	chartWraper:{
		flex:1,
		backgroundColor:'#f5f5f5'/*,
		marginTop:10*/
	},

	chartWraperView:{
		flex:1,
		backgroundColor:'#fff',
		marginTop:10,
		paddingLeft:10,
		paddingRight:10,
		paddingBottom:10
	},

	chartsTitle:{
		fontSize:16,
		color:'#454545',
		textAlign:'center'
	},
	titleImage:{
		width:24,
		height:24,
		marginRight:10
	},
	titleWraper:{
		height:40,
		flexDirection:'row',
		alignItems:'center',
		borderBottomWidth:1,
		borderBottomColor:"#f7f7f7",
		marginBottom:10
	}
})

export { ReportChart }